// 这是入口文件
// 导入Vue
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router.js'
import axios from 'axios'
import moment from 'moment'
import VueCookies from 'vue-cookies'
import Vuex from 'vuex'

// 全局配置axios
axios.defaults.baseURL = 'http://10.211.55.10:8000';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 请求时带上cookie
axios.defaults.withCredentials = true;
Vue.prototype.$http = axios

// 安装vue2-preview插件
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
// 导入MUI的样式
import './lib/mui/css/mui.min.css'
// 导入扩展图标样式
import './lib/mui/css/icons-extra.css'
// 导入mint-ui的样式
import 'mint-ui/lib/style.css'
// 使用路由功能
Vue.use(VueRouter)
Vue.use(VueCookies)
Vue.use(Vuex)

// 当项目启动的时候,从本地存储中获取chart,保存到state中,
var chart = JSON.parse(localStorage.getItem('chart') || '[]')

var store = new Vuex.Store({
    state: {
        chart: chart // 将购物车中的数据用一个数据存储起来
        // 暂时将购物车中的每一个对象设计为如下形式:
        // { id:商品id, count:商品购买数量, price:商品的销售价, selected:false  } selected用于标识是否结算此商品
    },
    mutations: {
        addtochart(state, goodsinfo) { // 商品添加到购物车的方法
            // 分析业务逻辑
            // 1. 当商品不存在于购物车的时候,chart数组push这个对象即可
            // 2. 当商品存在于购物车中的时候,找到chart数组中的这个对象,增加数量即可
            var exist = false;
            state.chart.some((item) => {
                if (item.id == goodsinfo.id) {
                    item.count += parseInt(goodsinfo.count);
                    exist = true
                    return true
                }
            })
            // 当商品不存在于购物车的时候
            if (!exist) {
                state.chart.push(goodsinfo)
            }
            // 上述逻辑执行完成后,需要将购物车中的数据保存到本地存储?我觉得应该存储到数据库比较合适吧
            // 因为没有用户登录模块,无法判断存储之后是哪个用户的购物车
            localStorage.setItem('chart', JSON.stringify(state.chart))
        },
        updateGoodsCount(state, obj) { // 根据传递的对象{id:goodsid, goods_count:count}修改state中对应商品的数量
            state.chart.some(item => {
                if (item.id == obj.id) {
                    // 直接覆盖原有的count值
                    // console.log("执行了更新")
                    // console.log(item.count)
                    // console.log(obj.count)
                    item.count = parseInt(obj.goods_count);
                    return true;
                }
            })
            // 执行完成更新后,将购物车中的数据同步到本地存储中
            // 执行了同步?
            // console.log("执行了同步?")
            localStorage.setItem('chart', JSON.stringify(state.chart))
        },
        removeGoodsById(state, goods_id){  // 根据传入的商品id删除购物车中指定的商品
            state.chart.some((item, index)=>{
                if(item.id == goods_id){
                    state.chart.splice(index, 1);
                    return true;
                }
            })
            // 操作完成后,将最新的chart数据同步到本地存储中
            localStorage.setItem("chart", JSON.stringify(state.chart))
        },
        goodsSelectedChanged(state, goods_id){  // 根据商品id修改商品选中状态
            // 分析,每次change都是一次取反的过程
            state.chart.some(item=>{
                if(item.id == goods_id){
                    item.selected = !item.selected;
                    return true
                }
            })
            // 上述逻辑处理完成,将最新的chart同步到本地存储中
            localStorage.setItem("chart", JSON.stringify(state.chart))
        }
    },
    getters: {
        gettotalcount(state) { // 计算购物车中的商品购买总数
            var totalcount = 0;
            state.chart.forEach(item => {
                totalcount += item.count
            })
            return totalcount
        },
        getgoodsids(state) { // 返回购物车中所有商品的id的列表,如果不存在商品返回空列表
            var goods_ids = []
            state.chart.forEach(item => {
                goods_ids.push(item.id)
            })
            return goods_ids
        },
        getgoodscount(state) {  // 返回购物车中所有商品id对应数量
            var goodsmap = {}
            // 遍历chart中的所有商品
            state.chart.forEach(item => {
                // 向goodsmap对象中插入如下键值对
                goodsmap[item.id] = item.count
            })
            return goodsmap
        },
        getGoodsIsSelected(state){  // 返回所有商品是否选中的对应关系对象
            var obj = {}
            state.chart.forEach(item=>{
                obj[item.id] = item.selected;
            })
            return obj
        },
        getSelectedGoodsAmountAndCount(state){  // 返回购物车中所有选中的商品的数量总和和总金额
            var obj = {count:0, amount:0};
            state.chart.forEach(item=>{
                if(item.selected){
                    obj.count += item.count;
                    obj.amount += item.count*item.price;
                }
            })
            return obj
        }
    }
})

// // 按需导入Mint-ui的组件
// import {
//     Header,
//     Swipe,
//     SwipeItem,
//     Button,
// } from 'mint-ui'

// // 注册header为全局组件
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// 全部导入mint-ui
import Mint from "mint-ui"
Vue.use(Mint)

// 注册全局过滤器
Vue.filter('dateFormat', function (datastr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(datastr).format(pattern)
})

var vm = new Vue({
    el: '#app',
    render: c => c(App),
    router,
    store
})
vm.withCredentials = true;